<script setup>
import { ref } from 'vue'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { reqBrandList, reqAddBrand, reqUpdateBrand, reqDeleteBrand } from '@/api/brand'
import baseDialog from '@/components/baseDialog.vue';
import { ElMessage } from 'element-plus';

const page = ref(1)
const limit = ref(3)
const total = ref()
// 获取品牌列表
const tableData = ref([])
const getBrandList = async () => {
  const res = await reqBrandList(page.value, limit.value)
  total.value = res.data.total
  tableData.value = res.data.records
}
getBrandList()


// 每页个数改变
const handleSizeChange = (val) => {
  limit.value = val
  getBrandList()
}
// 当前页改变
const handleCurrentChange = (val) => {
  page.value = val
  getBrandList()
}

const commonDialog = ref(null)
const title = ref('')
const formDate = ref({
  tmName: '',
  logoUrl: ''
})
// 添加品牌
const handleAdd = () => {
  // 重置表单
  formDate.value = {
    tmName: '',
    logoUrl: ''
  }
  title.value = '添加品牌'
  commonDialog.value.openDialog()
}
// 编辑品牌
const handleEdit = (row) => {
  title.value = '编辑品牌'
  formDate.value = { ...row }
  commonDialog.value.openDialog()
}
// 删除品牌
const handleDelete = async (row) => {
  const res = await reqDeleteBrand(row.id)
  if (res.code === 200) {
    ElMessage.success('删除成功')
    getBrandList()
  }
}
// 确认新增和编辑
const handerSubmit = async () => {
  if (title.value === '添加品牌') {
    const res = await reqAddBrand(formDate.value)
    if (res.code === 200) {
      ElMessage.success('添加成功')
    }
  } else {
    const res = await reqUpdateBrand(formDate.value)
    if (res.code === 200) {
      ElMessage.success('修改成功')
    }
  }
  getBrandList()
  commonDialog.value.dialogVisible = false
}
// 文件上传成功前
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片必须是jpg格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不能超过2MB!')
    return false
  }
  return true
}
// 文件上传成功后
const handleAvatarSuccess = (response, uploadFile) => {
  if (response.code === 200) {
    formDate.value.logoUrl = response.data
  }
}

// 删除品牌分类

</script>

<template>
  <div class="brand-container">
    <div class="btn"> <el-button type="primary" :icon="Plus" @click="handleAdd">添加品牌</el-button></div>
    <div class="table">
      <el-table :data="tableData" style="width: auto;height: auto;" border>
        <el-table-column label="序号" type="index" width="100px" />
        <el-table-column label="品牌名称" prop="tmName" />
        <el-table-column label="品牌LOGO">
          <template #default="{ row }">
            <img :src="row.logoUrl" style="width: 100px;height: 100px;" alt="">
          </template>
        </el-table-column>
        <el-table-column label="品牌操作">
          <template #default="{ row }">
            <el-button size="large" type="primary" :icon="Edit" circle @click="handleEdit(row)" />
            <el-popconfirm title="确认删除吗？" @confirm="handleDelete(row)">
              <template #reference>
                <el-button size="large" type="danger" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[3, 6, 9, 12]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <!-- 公共弹框组件 -->
    <baseDialog ref="commonDialog" :title="title" @comfirm="handerSubmit">
      <el-form :model="formDate" label-width="80px">
        <el-form-item label="品牌名称">
          <el-input v-model="formDate.tmName" />
        </el-form-item>
        <el-form-item label="品牌LOGO">
          <el-upload class="avatar-uploader" action="/api/admin/product/fileUpload" :show-file-list="false"
            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="formDate.logoUrl" :src="formDate.logoUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </baseDialog>
  </div>
</template>

<style scoped lang="scss">
.brand-container {
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 20px;

  .table {
    margin: 20px 0;
  }

  .page {
    width: 100%;
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader {
  ::v-deep .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);

    &:hover {
      border-color: var(--el-color-primary);
    }
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>